<template>
  <div class="order">
    <div class="header">
      <div><img src="@/assets/img/order/order_icon_talk2.0.png" />想对你说</div>
    </div>
    <van-tabs class="tabs" animated v-model="active" color="#323233" swipeable>
      <van-tab title="当前订单">
        <OrderEmpty v-if="!isLogin" @changeShow="changeShow"></OrderEmpty>
        <OrderList :type="'current'" v-if="isLogin"></OrderList>
      </van-tab>
      <van-tab title="历史订单">
        <OrderEmpty v-if="!isLogin" @changeShow="changeShow"></OrderEmpty>
        <OrderList :type="'history'" v-if="isLogin"></OrderList>
      </van-tab>
    </van-tabs>
    <!-- 遮罩层-登录 -->
    <ToLogin :show="show" @changeShow="changeShow"></ToLogin>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
import ToLogin from "../../components/ToLogin";
import OrderEmpty from "../../components/order/OrderEmpty";
import OrderList from "../../components/order/OrderList";

export default {
  name: "order",
  components: {
    ToLogin,
    OrderEmpty,
    OrderList,
  },
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {
  //     console.log("进入：",vm.$store.getters.userInfo)
  //     // vm.isLogin = ;
  //   });
  // },
  mounted() {
    
    this.$store.dispatch("setAction", 2);
    console.log("checkLogin", this.user);
    if (this.user != null) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
  },
  data() {
    return {
      show: false,
      active: 0,
      isLogin: null,
    };
  },
  watch: {
    user(newValue, oldVAlue) {
      console.log("触发登录状态监听", newValue);
      if (newValue != null) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
  },
  computed: {
    user() {
      return this.$store.getters.userInfo;
    },
    checkLogin() {},
  },
  methods: {
    changeShow() {
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
  },
};
</script>

<style scoped>
.order {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
}
.header {
  width: 100%;
  height: 1.8rem;
  box-sizing: border-box;
  padding: 0 0.5rem 0.1rem 0.5rem;
  display: flex;
  flex-direction: column-reverse;
}
.header div {
  width: 2.5rem;
  height: 0.8rem;
  border-radius: 20px;
  border: 1px solid #e1e1e1;
  line-height: 0.8rem;
  color: #646566;
  text-align: center;
  display: flex;
  flex-direction: row;
  font-size: 14px;
}
.header div img {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.15rem 0.1rem 0 0.2rem;
}
/* 消除标签页的边框 */
::v-deep .van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  /* border-width: 0.02667rem 0; */
  border-width: 0rem 0rem 0.05rem 0rem;
}
::v-deep .van-tab--active {
  color: #323233;
  font-weight: 900;
}
::v-deep .van-tab {
  font-size: 18px;
}
.tabs {
  position: absolute;
  top: 2.13rem;
  bottom: 1.4rem;
  right: 0;
  left: 0;
}
/* Tab标签页的布局修改 */
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.2rem;
}
::v-deep .van-tabs__content {
  position: absolute;
  top: 1.2rem;
  bottom: 0rem;
  right: 0;
  left: 0;
}
::v-deep .van-tab__pane,
.van-tab__pane-wrapper {
  height: 100%;
}
</style>